<template>
<!--  1.创建dom节点-->
  <div ref="HomeRef" class="homeclass"></div>

</template>

<script>
// 2引入echarts
import * as echarts from 'echarts'
import { GetHome } from '@/api'

export default {
  name: 'HomeState',
  data () {
    return {
      myChart: null,
      list: [], // 获取的数据
      page: 1, // 当前页
      total: 0, // 总数
      Interval: null// 计时器的实例
    }
  },
  mounted () {
    // 4调用初始化方法
    this.initCharts()
    window.addEventListener('resize', this.adaptationand)
    // 调用屏幕适配
    this.adaptationand()
  },
  destroyed () {
    clearInterval(this.Interval)
    window.removeEventListener('resize'.this.adaptationand )
  },
  methods: {
    // 3,初始化配置项.
    // 一，初始的信息
    initCharts () {
      this.myChart = echarts.init(this.$refs.HomeRef)
      this.myChart.on('mouseover', () => {
        clearInterval(this.Interval)
      })
      this.myChart.on('mouseout', () => {
        this.setIntervalfun()
      })
      // 绘制图表
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            itemStyle: {
              color: 'red',
              borderRadius: [20, 20, 0, 0] // （顺时针左上，右上，右下，左下）
            },
            barWidth: 35,
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      // 把配置项加载到图表
      this.myChart.setOption(option)
      this.getData()
    },
    // 二、数据信息
    // 获取数据
    async getData () {
      const { data: res } = await GetHome()
      this.list = res.data
      this.list.sort((a, b) => {
        return b.num - a.num
      })
      // 获取总条数
      this.total = Math.ceil(this.list.length / 5)
      console.log(this.total)
      this.updataChart()
      // 调用计时器，轮换显示数据
      this.setIntervalfun()
    },
    // 更新数据
    updataChart () {
      // 处理的到的数据
      // 获取x轴上的名字
      // 起始下标
      // 结束的下标
      const newdata = this.list.slice((this.page - 1) * 5, this.page * 5)
      const namex = newdata.map(item => item.name)
      const valuey = newdata.map(item => {
        return item.num
      })
      // 渲染到图表上
      var option = {
        xAxis: { data: namex },
        series: [{ data: valuey }]
      }
      // 把配置项加载到图表
      this.myChart.setOption(option)
    },
    setIntervalfun () {
      if (this.Interval) {
        clearInterval(this.Interval)
      }
      this.Interval = setInterval(i => {
        this.page === this.total ? this.page = 1 : this.page++
        this.updataChart()
      }, 2000)
    },
    // 三、屏幕适配
    // 屏幕适配方式
    adaptationand () {
      // 获取当前图表的宽度
      //  标准值
      const i = this.$refs.HomeRef.offsetWidth / 610
      var adoption = {
        title: {
          textStyle: {
            fontSize: 18 * i
          }
        },
        xAxis: {
          axisLabel:{
            fontSize: 12 * i
          }
        },
        series: [
          {
            itemStyle: {
              borderRadius: [20 * i, 20 * i, 0, 0] // （顺时针左上，右上，右下，左下）
            },
            barWidth: 35 * i
          }
        ]
      }
      // 把配置项加载到图表
      this.myChart.setOption(adoption)
      this.myChart.resize()
    }

    // initCharts () {
    //   this.myChart = echarts.init(this.$refs.HomeRef)
    //   // 绘制图表
    //   var option = {
    //
    //   }
    //   // 把配置项加载到图表
    //   this.myChart.setOption(option)
    // }
    // 获取到当前图表 的宽度
  }
}
</script>

<style>
html , body , #app {
  width: 100%;
  height: 100%;
}
.home{
  width: 100%;
  height: 100%;
}
.homeclass{
  width: 80%;
  height: 50%;
}
</style>
